﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>站酷 (ZCOOL) - 设计师互动平台 - 打开站酷，发现更好的设计！</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>  
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
	<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/advtop.js"></script>
    <script src="js/banner.js"></script>
    <script src="js/btmadv.js"></script>
    <script src="js/gotop.js"></script>
    <script src="js/maincontent.js"></script>
    <script src="js/hiddencontent.js"></script>
    <script src="js/hover.js"></script>
</head>

<body>
    <div class="nav">
        <div class="nav_cotent">
            <div class="nav_left"><img src="img/logo.png"></div>
            <div class="nav_mid">
                <ul>
                    <li class="active">
                        <a href="#">首页</a>
                    </li>
                    <li><a href="#">发现</a>
                        <div class="nev_list main">
                            <div class="list ">
                                <span>平面<i></i></span>
                                <span>UI<i></i></span>
                                <span>网页<i></i></span>
                                <span>插画<i></i></span>
                                <span>动漫<i></i></span>
                                <span>摄影<i></i></span>
                                <span>空间</span>
                                <span>工业/产品<i></i></span>
                                <span>三维<i></i></span>
                                <span>影视<i></i></span>
                                <span>手工艺<i></i></span>
                                <span>纯艺术<i></i></span>
                                <span>服装<i></i></span>
                                <span>其他</span>
                            </div>
                            <div class="check_all ">
                                <span>精选作品&nbsp;&nbsp;></span>
                                <span>精选作品&nbsp;&nbsp;></span>
                                <span>精选作品&nbsp;&nbsp;></span>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">同城</a></li>
                    <li>
                        <a href="#">职位</a>
                        <div class="nev_list horizontal">
                            <p>职位</p>
                            <p>职位</p>
                            <p>职位</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">活动</a>
                        <div class="nev_list horizontal">
                            <p>职位</p>
                            <p>公司</p>
                            <p>+发布职位</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">正版素材</a>
                        <div class="nev_list horizontal">
                            <p>图片</p>
                            <p>视频</p>
                            <p>字体</p>
                            <p>音乐</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">课程</a>
                        <div class="nev_list horizontal">
                            <p>正在热销</p>
                            <p>口碑好课</p>
                        </div>
                    </li>
                    <li>
                        <a href="#">...</a>
                        <div class="nev_list horizontal">
                            <p>榜单</p>
                            <p>设计师</p>
                            <p>站酷APP</p>
                            <p>站酷字库</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="nev_right">
                <span class="box">
                    搜
                </span>
                <span class="box">
                    云
                </span>
                <span class="user">
                    <a href="#">登录</a>|<a href="#">注册</a>
                </span>
            </div>
        </div>
    </div>
    <style>
        .swiper-container {
            width: 100%;
            height: 400px;
            margin-bottom: 30px;
        }

        .swiper-wrapper img {
            width: 100%;
            margin-top: 20px;
        }

        .swiper-button-prev {
            border-radius: 100%;
            background-color: rgba(168, 169, 168, 0.3);
            width: 65px;
            height: 65px;
        }


        .swiper-button-next {
            border-radius: 100%;
            background-color: rgba(168, 169, 168, 0.3);
            width: 65px;
            height: 65px;


        }
    </style>
    <div class="banner">
        <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="img/01a2d15dc223d2a801209e1f06068a.png" alt=""></div>
                <div class="swiper-slide"><img src="img/01d15c5dc223b9a8012163badaf549.png" alt=""></div>
                <div class="swiper-slide"><img src="img/01fbbe5dc4cfd2a8012163ba9f8200.jpg" alt=""></div>
                ...
            </div>
            <!-- If we need pagination -->
            <!-- <div class="swiper-pagination"></div> -->

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev">

            </div>
            <div class="swiper-button-next">

            </div>

            <!-- If we need scrollbar -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>

        <div class="advtop">
            <!-- Banner下的推荐列表 图片一样 -->
            <ul>
            </ul>
        </div>
        <div class="subnav">
            <!-- 首页推荐 最新发布 上升最快 三个标题栏 -->
            <div class="content">
                <div class="daohang">

                    <a href="" class="active">首页推荐</a>
                    <a href="">最新发布</a>
                    <a href="">上升最快</a>
                </div>
            </div>
        </div>
    </div>

    <div class="mid">
        <div class="mid">
            <div class="content">
            </div>
        </div>
        <div class="laypage">
            <!-- 页面标号 -->
            <div class="hezi">
                <div class="BH">
                    <p>&#60</p>
                </div>
                <div class="BH">
                    <p class="one">1</p>
                </div>
                <div class="BH">
                    <p>2</p>
                </div>
                <div class="BH">
                    <p>3</p>
                </div>
                <div class="BH">
                    <p>4</p>
                </div>
                <div class="BH">
                    <p>5</p>
                </div>
                <div class="BH">
                    <p>6</p>
                </div>
                <div class="BH">
                    <p>7</p>
                </div>
                <div class="BH">
                    <p>...</p>
                </div>
                <div class="BH">
                    <p>99</p>
                </div>
                <div class="BH">
                    <p>100</p>
                </div>
                <div class="BH">
                    <p>&#62</p>
                </div>
            </div>
        </div>
        <div class="advlong">
            <!-- 页面标号下横幅 -->
            <img src="https://reviveimg.hellorf.com/www/images/2998e8112211795da8fecc6b75fa254c.jpg" alt="图片加载失败" />
        </div>
        <div class="recommend">
            <!-- 推荐课程 图片介绍等一样 -->
            <div class="wz">
                <div class="wz-left">推荐课程</div>
                <div class="wz-right">换一换</div>
            </div>
            <div class="img">
                <div class="A">
                    
                </div>
               
                    </a>
                </div>
            </div>
        </div>
    </div>


    <div class="footer">
        <div class="footer_bl">
            <div class="footer_top">
                <div class="footer_top_left">
                    <div class="footer_hide"><img src="./img/2weima.png" alt=""></div>
                    <img src="./img/phone.PNG" alt="">
                    <a href="" class="footer_top_left_a">移动版</a>
                    <a href="">关于我们</a>
                    <a href="">加入站酷</a>
                    <a href="">用户协议</a>
                    <a href="">隐私政策</a>
                    <a href="">侵权申诉</a>
                    <a href="">企业服务</a>
                    <a href="">帮助中心</a>
                    <a href="">联系我们</a>
                    <a href="">中文</a>
                    <a href="">English</a>
                </div>
                <div class="footer_top_right">
                    <img src="./img/Wechat.PNG" alt="">
                    <img src="./img/NewLang.PNG" alt="">
                </div>
            </div>

            <div class="footer_bottom">
                <a href="">京ICP备11017824号-4</a>
                <i></i>
                <a href="">京ICP证130164号</a>
                <i></i>
                <span>
                    <img src="./img/police.png" alt="">
                    <a href="">京公网安备11010502000501号</a>
                </span>
                <i></i>
                <a href="">网络文化经营许可证 京网文[2016]6173-844号</a>
                <i></i>
                <a href="">广播电视节目制作经营许可证（京）字第06990号</a>
            </div>
            <div class="footer_bottom_2">
                <a href="">营销执照</a>
                <i></i>
                <a href="">网上有害信息举报专区</a>
                <i></i>
                <a href="">不良信息举报电话：010-56538658</a>
                <i></i>
                <a href="">举报邮箱 jubao@zcool.com.cn </a>
                <i></i>
                <a href="">联系电话：010-56538600</a>

                <span>
                    <p>Copyright © 2006-2019 </p>
                    <a href="">ZCOOL站酷</a>
                </span>
            </div>

        </div>
    </div>
    <div class="back_top">
        <!-- <input type="button" value="回到顶部" id="myBtn"> -->
        <p>回到顶部</p>
    </div>

</body>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        // Optional parameters
        direction: 'horizontal',
        loop: true,
        speed: 300,


        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
            clickable: true,

        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })
</script>

</html>